<!--
 * @Description: 编辑网元
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-07-17 09:04:06
 * @LastEditTime: 2021-11-11 16:21:01
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="ne-content">
    <div class="info">
      <h1 class="title">编辑网元</h1>
      <el-form :model="form" class="form" :rules="rules" ref="deviceForm" label-width="100px">
        <!-- 名称 -->
        <el-form-item label="设备名称" prop="userlabel" key="userlabel">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.userlabel" maxlength="100" />
          </el-col>
        </el-form-item>
        <!-- 类型 -->
        <el-form-item label="网元类型" prop="neLayer" key="neLayer">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select v-model="form.neLayer" style="width: 100%;" @change="selDeviceType" disabled>
              <el-option value="Access" label="CPE"></el-option>
              <el-option value="Mixed" label="POP"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <!-- 型号 -->
        <el-form-item label="设备型号" prop="type" key="type">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select v-model="form.type" style="width: 100%;" @change="selNeType" disabled>
              <el-option
                v-for="(item, index) in types"
                :key="index"
                :value="item.id"
                :label="item.displayName"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <!-- 子型号 -->
        <el-form-item label="子型号" prop="subType" key="subType">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select v-model="form.subType" style="width: 100%;" disabled>
              <el-option
                v-for="(item, index) in childrenType"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <!-- 软件SN -->
        <el-form-item
          label="软件SN"
          prop="sn"
          key="sn"
          :rules="[{required: true, pattern: /^[a-zA-Z0-9]{1}[a-zA-Z0-9]{1}:[a-zA-Z0-9]{1}[a-zA-Z0-9]{1}:[a-zA-Z0-9]{1}[a-zA-Z0-9]{1}:[a-zA-Z0-9]{1}[a-zA-Z0-9]{1}:[a-zA-Z0-9]{1}[a-zA-Z0-9]{1}:[a-zA-Z0-9]{1}[a-zA-Z0-9]{1}$/, message: '软件SN不符合规范', trigger: 'blur'}]"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.sn" disabled />
          </el-col>
        </el-form-item>
        <!-- IP地址 -->
        <template v-if="form.neLayer === 'Mixed' || form.subType === '6800_4E'">
          <el-form-item
            label="IP地址"
            prop="ipAddress"
            key="ipAddress"
            :rules="[{required: true, pattern: /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)(\/(\d|[1-2]\d|3[0-2]))?$|^([\da-fA-F]{1,4}:){6}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^::([\da-fA-F]{1,4}:){0,4}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:):([\da-fA-F]{1,4}:){0,3}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:){2}:([\da-fA-F]{1,4}:){0,2}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:){3}:([\da-fA-F]{1,4}:){0,1}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:){4}:((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:){7}[\da-fA-F]{1,4}(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^:((:[\da-fA-F]{1,4}){1,6}|:)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^[\da-fA-F]{1,4}:((:[\da-fA-F]{1,4}){1,5}|:)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:){2}((:[\da-fA-F]{1,4}){1,4}|:)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:){3}((:[\da-fA-F]{1,4}){1,3}|:)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:){4}((:[\da-fA-F]{1,4}){1,2}|:)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:){5}:([\da-fA-F]{1,4})?(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:){6}:(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$/, message: '请填写IPv4 or IPv6/Mask', trigger:'blur'}]"
          >
            <el-col :xs="24" :sm="12" :lg="6">
              <el-input v-model.trim="form.ipAddress" />
            </el-col>
          </el-form-item>
        </template>
        <!-- 管理状态 -->
        <el-form-item label="管理状态" prop="managementState" key="managementState">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-switch
              v-model="form.managementState"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </el-col>
        </el-form-item>
        <!-- 通讯方式 -->
        <el-form-item label="通讯方式" prop="telnetConfig" key="telnetConfig">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-radio v-model="form.telnetConfig" label="SSH">SSH</el-radio>
            <el-radio v-model="form.telnetConfig" label="Telnet">Telnet</el-radio>
          </el-col>
        </el-form-item>
        <!-- 端口 -->
        <el-form-item label="服务端口" prop="port" key="port">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input-number v-model="form.port" :min="0" :max="255"></el-input-number>
          </el-col>
        </el-form-item>
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username" key="username">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.username" />
          </el-col>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="登录密码" prop="password" key="password">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.password" type="password" maxlength="14" />
          </el-col>
        </el-form-item>
        <!-- 业务环回地址 -->
        <el-form-item
          label="业务环回地址"
          prop="loopbackIp"
          key="loopbackIp"
          :rules="[{ pattern: /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){6}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^::([\da-fA-F]{1,4}:){0,4}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:):([\da-fA-F]{1,4}:){0,3}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){2}:([\da-fA-F]{1,4}:){0,2}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){3}:([\da-fA-F]{1,4}:){0,1}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){4}:((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){7}[\da-fA-F]{1,4}$|^:((:[\da-fA-F]{1,4}){1,6}|:)$|^[\da-fA-F]{1,4}:((:[\da-fA-F]{1,4}){1,5}|:)$|^([\da-fA-F]{1,4}:){2}((:[\da-fA-F]{1,4}){1,4}|:)$|^([\da-fA-F]{1,4}:){3}((:[\da-fA-F]{1,4}){1,3}|:)$|^([\da-fA-F]{1,4}:){4}((:[\da-fA-F]{1,4}){1,2}|:)$|^([\da-fA-F]{1,4}:){5}:([\da-fA-F]{1,4})?$|^([\da-fA-F]{1,4}:){6}:$/, message: '请填写IPv4 or IPv6', trigger:'blur'}]"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model.trim="form.loopbackIp" />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 90px" @click="cancel">返回</el-button>
          <el-button type="primary" style="width: 90px" @click="submitForm('deviceForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import crypo from 'crypto-browserify';
export default {
  inject: ['reload'],
  props: ['ne', 'product'],
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      // 初始化表单
      _this.formInit();
    });
  },
  // 监听值
  watch: {
    // 网元类型
    'form.neLayer': {
      immediate: true,
      handler (val) {
        let _this = this;
        if (val === 'Mixed') {
          let arry = [];
          for (let i = 0; i < _this.product.length; i++) {
            if (_this.product[i].extAttrs.series === 'pop') {
              arry.push(_this.product[i]);
            }
          }
          _this.types = arry;
        } else {
          let arry = [];
          for (let i = 0; i < _this.product.length; i++) {
            if (_this.product[i].extAttrs.series === 'cpe') {
              arry.push(_this.product[i]);
            }
          }
          _this.types = arry;
        }
      }
    },
    // 设备型号
    'form.type': {
      immediate: true,
      handler (val) {
        let _this = this;
        let arry = [];
        for (let i = 0; i < _this.types.length; i++) {
          if (val === _this.types[i].id) {
            arry = _this.types[i].extAttrs.subTypes;
          }
        }
        _this.childrenType = arry;
      }
    },
    // 链接方式
    'form.telnetConfig': function(val) {
      let _this = this;
      if (val === 'SSH') {
        _this.form.port = 22;
      } else {
        _this.form.port = 23;
      }
    }
  },
  data () {
    return {
      // 设备型号
      types: [],
      // 子型号
      childrenType: [],
      form: {
        managementState: true
      },
      rules: {
        userlabel: [{
          required: true,
          message: '请填写设备名称',
          trigger: 'blur'
        }],
        neLayer: [{
          required: true,
          message: '请选择网元类型',
          trigger: 'change'
        }],
        type: [{
          required: true,
          message: '请选择设备型号',
          trigger: 'change'
        }],
        subType: [{
          required: true,
          message: '请选择子型号',
          trigger: 'change'
        }],
        managementState: [{
          required: true,
          trigger: 'change'
        }],
        telnetConfig: [{
          required: true,
          trigger: 'change'
        }],
        port: [{
          required: true,
          message: '请输入服务端口号',
          trigger: 'blur'
        }],
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入登录密码',
          trigger: 'blur'
        }]
      }
    };
  },
  methods: {
    // 返回
    cancel () {
      let _this = this;
      _this.$emit('handleChange', 0);
    },
    // 初始化表单
    formInit () {
      let _this = this;
      _this.form = {
        id: _this.ne.id,
        userlabel: _this.ne.userlabel,
        neLayer: _this.ne.neLayer,
        sn: _this.ne.extAttrs.allEsn,
        type: _this.ne.type,
        subType: _this.ne.subType,
        ipAddress: _this.ne.ipAddress,
        managementState: _this.ne.managementState === 'ONLINE' ? true : false,
        telnetConfig: _this.ne.telnetConfig.ssh ? 'SSH' : 'Telnet',
        port: _this.ne.telnetConfig.port,
        username: _this.ne.authInfo.username,
        password: _this.ne.authInfo.password,
        loopbackIp: _this.ne.loopbackIp
      };
    },
    // 选择设备类型
    selDeviceType () {
      let _this = this;
      _this.form.type = null;
      _this.form.subType = null;
    },
    // 选择网元型号
    selNeType () {
      let _this = this;
      _this.form.subType = null;
    },
    submitForm (formName) {
      let _this = this;
      _this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 管理状态
          _this.form.managementState = _this.form.managementState ? 'ONLINE' : 'OFFLINE';
          // 请求参
          let params = {};
          // 名称
          if (_this.ne.userlabel !== _this.form.userlabel) {
            params['userlabel'] = {};
            params['userlabel']['newVal'] = _this.form.userlabel;
          }
          // 管理状态
          if (_this.ne.managementState !== _this.form.managementState) {
            params['managementState'] = {};
            params['managementState']['newVal'] = _this.form.managementState;
          }
          // IP
          if (_this.ne.ipAddress !== _this.form.ipAddress) {
            params['ipAddress'] = {};
            params['ipAddress']['newVal'] = _this.form.ipAddress;
          }
          // 通讯方式
          let ssh = _this.form.telnetConfig === 'SSH' ? true : false;
          if (_this.ne.telnetConfig.ssh !== ssh) {
            params['telnetConfig.ssh'] = {};
            params['telnetConfig.ssh']['newVal'] = _this.form.telnetConfig === 'SSH' ? true : false;
          }
          // 端口
          if (_this.ne.telnetConfig.port !== _this.form.port) {
            params['telnetConfig.port'] = {};
            params['telnetConfig.port']['newVal'] = _this.form.port;
          }
          // 用户名
          if (_this.ne.authInfo.username !== _this.form.username) {
            params['authInfo.username'] = {};
            params['authInfo.username']['newVal'] = _this.form.username;
          }
          // 密码
          if (_this.ne.authInfo.password !== _this.form.password) {
            // 二次加密
            const response = await _this.$http.get({ url: '/action/csrf' });
            const tokenValue = response.token;
            const cipher = crypo.createCipher('aes-128-ecb', tokenValue);
            cipher.update(_this.form.password);
            _this.form.password = cipher.final('base64');
            params['authInfo.password'] = {};
            params['authInfo.password']['newVal'] = _this.form.password;
          }
          // 业务环回地址
          if (_this.ne.loopbackIp !== _this.form.loopbackIp) {
            params['loopbackIp'] = {};
            params['loopbackIp']['newVal'] = _this.form.loopbackIp;
          }
          if (JSON.stringify(params) === '{}') {
            _this.form.managementState = _this.ne.managementState === 'ONLINE' ? true : false;
            this.$message.info('请修改需要更新的内容！');
          } else {
            // 更新网元
            _this.$http.put({
              url: '/api/sdwan/ne/' + _this.form.id,
              data: params,
              loading: true
            }).then(res => {
              let { status } = res;
              if (status === '0') {
                _this.$message.success('更新成功！');
                _this.cancel();
                _this.$parent.refresh();
              }
            });
          }
        } else {
          this.$message.error('请检查必填项！');
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.ne-content {
  .header {
    background: #fff;
    padding: 30px 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .left-wrap {
      .avatar {
        width: 110px;
        height: 110px;
        object-fit: cover;
        border-radius: 50%;
      }

      h2 {
        font-size: 30px;
        margin-top: 20px;
        font-weight: 500;
      }

      p {
        color: #9ca3ae;
        font-size: 14px;
        margin-top: 20px;
        display: none;
      }

      .task {
        margin-top: 30px;
        display: flex;
        align-items: center;

        span {
          color: #9ca3ae;
          font-size: 14px;
          margin-right: 30px;
          margin-left: 8px;
        }
      }
    }

    .right-wrap {
      display: flex;
      align-items: center;

      img {
        width: 230px;
      }
    }
  }

  .info {
    background: #fff;

    .title {
      font-size: 22px;
      font-weight: 500;
      padding: 15px 40px;
      border-bottom: 1px solid #eee;
    }

    .form {
      padding: 30px 40px;
      box-sizing: border-box;
    }
  }
}

@media only screen and (max-width: $device-ipad) {
  .ne-content {
    .header {
      padding: 20px 20px;

      .left-wrap {
        .avatar {
          width: 90px;
          height: 90px;
        }

        h2 {
          font-size: 20px;
          margin-top: 20px;
        }

        .task {
          margin-top: 15px;

          .icon {
            width: 2.8em;
            height: 2.8em;
            vertical-align: -0.15em;
          }

          span {
            font-size: 15px;
          }
        }
      }

      .right-wrap {
        display: flex;
        align-items: center;

        img {
          display: none;
        }
      }
    }

    .info {
      .title {
        font-size: 18px;
        padding: 15px 20px;
      }

      .form {
        padding: 30px 20px;
      }
    }
  }
}
</style>